<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="ipt">
<button id="add">添加</button>
<ul id="list"></ul>
<script>
    /**
     * Created by Administrator on 2019/9/9.
     */


    var add = document.querySelector('#add');
    add.addEventListener('click',function () {
        //获取input的内容
        var ipt = document.querySelector('#ipt');
        // 创建li标签
        var li = document.createElement('li');
        var span = document.createElement('span');
        var span_text = document.createTextNode(ipt.value);
        span.appendChild(span_text);
        //创建button标签
        var button = document.createElement('button');
        var button_text = document.createTextNode('删除');
        button.appendChild(button_text);
        button.addEventListener('click',function () {
            var list = document.querySelector('#list')
            list.removeChild(this.parentNode)
        })
        //把span和button追加到li标签
        li.appendChild(span);
        li.appendChild(button);
        //把li标签追加到ul里面
        var list = document.querySelector('#list');
        list.appendChild(li);
    })
</script>
</body>
</html>